<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>添加规格</title>

<link rel="stylesheet" type="text/css" href="<?php echo asset_url('js/bootstrap/css/bootstrap.min.css');?>" />
<link rel="stylesheet" type="text/css" href="<?php echo asset_url('js/bootstrap/css/bootstrap-responsive.min.css');?>" />
<script type="text/javascript" src="<?php echo asset_url('js/jquery/jquery.js');?>"></script>

<link rel="stylesheet" type="text/css" href="<?php echo theme_url('css/common.css');?>" />
<script type="text/javascript" src="<?php echo theme_url('js/common.js');?>"></script>

<!-- 颜色选择器插件 -->
<script type="text/javascript" src="<?php echo asset_url('js/modcoder_excolor/jquery.modcoder.excolor.js');?>"></script>

<script type="text/javascript">

	var value_td_list = [
			'<input type="text" name="values[]" />',
			'<input type="text" name="values[]" class="span1 colorpicker" />',
			'<input type="hidden" name="values[]" /><img src="" style="max-width: 40px; max-height: 40px; display: none;" />&nbsp;&nbsp;<button type="button" class="btn select_picture">上传图片</button>'
		];

	var value_td = value_td_list[0];

	function add_one(name, value, type)
	{
		value_td = value_td_list[type - 1];
		var tr = '<tr>'
		tr += '<td>' + value_td + '</td>';
		tr += '<td><i class="icon-remove delete" title="删除"></i></td>';
		tr += '</tr>';
		$('#add_box tbody').append(tr);

		$('.colorpicker:last').modcoder_excolor();
	}

	$(document).ready(function(){

		$('[name="type"]').click(function(){

			var $type = $(this);

			value_td = value_td_list[$type.val() - 1];

			$('#add_box tbody tr').each(function(){
				var td = $(this).find('td:eq(0)');
				var value = td.find(':input:eq(0)').val();

				td.empty().append(value_td);

				if (value)
				{
					td.find(':input:eq(0)').val(value);
					if ($type.val() == '3')
					{
						td.find('img').attr('src', value).show();
					}
				}

				if ($type.val() == '2')
				{
					td.find('.colorpicker').modcoder_excolor();
				}

			});

		});

		$('#add_one').click(function(){
			add_one('', '', $('[name="type"]:checked').val());
		});

		$('#add_box tbody tr td i.delete').live('click', function(){
			$(this).parent().parent().remove();
		});

	});
</script>

</head>
<body>

	<?php echo widget('admin/header');?>

	<div id="wrap" class="container">
		
		<form class="form-horizontal" action="__SELF__" method="post" enctype="multipart/form-data">

			<div class="btn-toolbar">
				<div class="btn-group">
					<a href="<?php echo $this->session->get('back');?>" class="btn">返回</a>
				</div>
				<div class="btn-group">
					<button type="submit" class="btn btn-primary">提交</button>
				</div>
				<div class="btn-group">
					<button type="reset" class="btn">取消</button>
				</div>
			</div>

			<div class="control-group">
				<label class="control-label" for="name">名称：</label>
				<div class="controls">
					<input type="text" name="name" class="span4" id="name">
				</div>
			</div>

			<div class="control-group">
				<label class="control-label">显示类型：</label>
				<div class="controls" >
					<label class="radio inline">
						<input type="radio" name="type" id="type_text" value="1" checked="checked">
						文本
					</label>
					<label class="radio inline">
						<input type="radio" name="type" id="type_color" value="2">
						颜色
					</label>
					<label class="radio inline">
						<input type="radio" name="type" id="type_img" value="3">
						图片
					</label>
				</div>
			</div>

			<div class="control-group">
				<label class="control-label">显示方式：</label>
				<div class="controls">
					<label class="radio inline">
						<input type="radio" name="mode" id="mode_ul" value="1" checked="checked">
						列表
					</label>
					<label class="radio inline">
						<input type="radio" name="mode" id="mode_select" value="2">
						下拉框
					</label>
				</div>
			</div>

			<button type="button" class="btn" id="add_one">添加规格值</button><br /><br />
			<table class="table table-bordered" id="add_box">
				<thead>
					<tr>
						<th>值</th>
						<th width="5%">操作</th>
					</tr>
				</thead>
				<tbody></tbody>
			</table>

			<div class="form-actions">
				<button type="submit" class="btn btn-primary">提交</button>
				<button type="reset" class="btn">取消</button>
			</div>
			
		</form>

	</div>

	<?php echo widget('admin/footer');?>

</body>
</html>